body,
p,
pre {
  margin: 0;
}

button {
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

h1, h2, h3 {
  margin: 0;
  font: inherit;
}

ul, ol {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  overflow-x: hidden;
}

img {
  overflow: hidden;
}

body {
  font-family: -apple-system, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  line-height: 1;
  color: #333;
}

#react-root,
div,
article,
footer,
header,
main,
nav,
section {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

button {
  cursor: pointer;
}

::-moz-selection {
  background-color: #dddedf;
}

::selection {
  background-color: #dddedf;
}

::-webkit-input-placeholder {
  color: #808080;
}
.u-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ErrorContainer {

}

.Error-code {
  border: 4px solid #333;
  width: 96px;
  height: 96px;
  line-height: 96px;
  text-align: center;
  margin: 0 auto;
  font-size: 38px;
  margin-bottom: 28px;
}

.Error-description {
  margin-bottom: 48px;
  text-align: center;
}

.Error-button {
  -webkit-flex: 0;
      -ms-flex: 0;
          flex: 0;
  margin: 0 auto;
}

.BrowserHappy {
  display: block;
  font-size: 1.2em;
  line-height: 2.6;
  background: #eee;
  text-align: center;
}

.BrowserHappy a {
 color: #259;
}
@font-face {
  font-family: 'icomoon';
  src: url(//static.zhihu.com/hemingway/icomoon.4356ce085a0c387d28c3d236716f682d.ttf) format('truetype'),
    url(//static.zhihu.com/hemingway/icomoon.207481a709643f0dfd3d7418ad204e91.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-size: 24px;
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ic_collect:before {
  content: "\E933";
}

.icon-wallet:before {
  content: "\E932";
}

.icon-ic_wechatpay:before {
  content: "\E931";
}

.icon-ic_pass:before {
  content: "\E930";
}

.icon-ic_visibility_off:before {
  content: "\E92D";
}

.icon-ic_highlighted:before {
  content: "\E92E";
}

.icon-ic_conversations:before {
  content: "\E92F";
}

.icon-ic_share_dudu:before {
  content: "\E928";
}

.icon-ic_check_button_off:before {
  content: "\E92B";
}

.icon-ic_check_button_on:before {
  content: "\E92C";
}

.icon-ic_comment:before {
  content: "\E92A";
}

.icon-ic_lock:before {
  content: "\E929";
}

.icon-ic_invite_cancel:before {
  content: "\E927";
}

.icon-ic_column_no_article:before {
  content: "\E923";
}

.icon-ic_no_article:before {
  content: "\E924";
}

.icon-ic_no_contribute:before {
  content: "\E925";
}

.icon-ic_no_drafts:before {
  content: "\E926";
}

.icon-ic_column_end:before {
  content: "\E91B";
}

.icon-ic_column_play:before {
  content: "\E922";
}

.icon-ic_edit_editlink:before {
  content: "\E91C";
}

.icon-ic_edit_link:before {
  content: "\E91D";
}

.icon-ic_edit_showlink:before {
  content: "\E91E";
}

.icon-ic_edit_t:before {
  content: "\E91F";
}

.icon-ic_prompt_done:before {
  content: "\E920";
}

.icon-ic_prompt_error:before {
  content: "\E921";
}

.icon-ic_nav_review:before {
  content: "\E919";
}

.icon-ic_loading:before {
  content: "\E91A";
}

.icon-ic_review_add:before {
  content: "\E918";
}

.icon-ic_column_report:before {
  content: "\E917";
}

.icon-ic_close:before {
  content: "\E900";
}

.icon-ic_column_edit:before {
  content: "\E901";
}

.icon-ic_column_like:before {
  content: "\E902";
}

.icon-ic_column_more:before {
  content: "\E903";
}

.icon-ic_column_reply:before {
  content: "\E904";
}

.icon-ic_column_share:before {
  content: "\E905";
}

.icon-ic_comment_like:before {
  content: "\E906";
}

.icon-ic_help:before {
  content: "\E907";
}

.icon-ic_like_more:before {
  content: "\E908";
}

.icon-ic_nav_more:before {
  content: "\E909";
}

.icon-ic_nav_new:before {
  content: "\E90A";
}

.icon-ic_phot_camera_alt:before {
  content: "\E90B";
}

.icon-ic_phot_delete:before {
  content: "\E90C";
}

.icon-ic_phot_full_screen1:before {
  content: "\E90D";
}

.icon-ic_phot_full_screen2:before {
  content: "\E90E";
}

.icon-ic_radio_button_off:before {
  content: "\E90F";
}

.icon-ic_radio_button_on:before {
  content: "\E910";
}

.icon-ic_refresh:before {
  content: "\E911";
}

.icon-ic_search:before {
  content: "\E912";
}

.icon-ic_share_sina:before {
  content: "\E913";
}

.icon-ic_share_wechat:before {
  content: "\E914";
}

.icon-ic_unfold:before {
  content: "\E915";
}

.icon-ic_zhihu_logo:before {
  content: "\E916";
}
.Button {
  display: inline-block;
  padding: 0 16px;
  font-size: 14px;
  line-height: 34px;
  color: #8590a6;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgb(204, 216, 225);
  border-radius: 3px;
}
/* Firefox button padding, border compatible */

.Button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.Button:focus {
  outline: none;
}

.Button:disabled {
  cursor: default;
  opacity: .5;
}

.Button:hover {
  background-color: rgba(207, 216, 230, .1);
}

.Button:hover:disabled {
  background-color: initial;
}

.Button--plain, .Button--link {
  height: auto;
  padding: 0;
  line-height: inherit;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.Button--plain:hover, .Button--link:hover {
  background-color: transparent;
}

.Button--link {
  color: #175199;
}

.Button--grey:hover {
  color: #abb6c5;
  border: 1px solid #abb6c5;
}

.Button--grey, .Button--grey:disabled {
  color: #c3ccd9;
  border: 1px solid #c3ccd9;
}

.Button--blue {
  color: #0f88eb;
  border: 1px solid #0f88eb;
}

.Button--blue:hover {
  background-color: rgba(13, 121, 209, .06);
}

.Button--blue:disabled {
  background-color: initial;
}

.Button--green {
  color: #50c87e;
  border: 1px solid #50c87e;
}

.Button--green:hover {
  background-color: rgba(8, 166, 100, .06);
}

.Button--green:disabled {
  background-color: initial;
}

.Button--primary {
  background: rgb(204, 216, 225);
}

.Button--primary.Button--blue {
  color: #fff;
}

.Button--primary.Button--blue:hover {
  background-color: #0d79d1;
}

.Button--primary.Button--blue, .Button--primary.Button--blue:disabled {
  background: #0f88eb;
}

.Button--primary.Button--green {
  color: #fff;
  border-color: #0ca547;
}

.Button--primary.Button--green:hover {
  background-color: #08a369;
}

.Button--primary.Button--green, .Button--primary.Button--green:disabled {
  background: #0ca547;
}

.Button--primary.Button--red {
  color: #fff;
}

.Button--primary.Button--red:hover {
  background-color: #ed4e50;
}

.Button--primary.Button--red, .Button--primary.Button--red:disabled {
  background: #e26d6d;
  border-color: #e26d6d;
}

.Button--primary.Button--grey {
  color: #fff;
}

.Button--primary.Button--grey:hover {
  background: #abb6c5;
  border: 1px solid #abb6c5;
}

.Button--primary.Button--grey, .Button--primary.Button--grey:disabled {
  background: #c3ccd9;
  border: 1px solid #c3ccd9;
}

.Button--spread {
  width: 100%;
}

.Button-icon {
  margin-right: 7px;
}

.Button--plain .Button-icon {
  margin-right: 6px;
}

.Button--red .Button-icon,
  .Button--blue .Button-icon,
  .Button--green .Button-icon {
  fill: currentColor;
}
.Icon {
  vertical-align: text-bottom;
  fill: #9fadc7;
}

.Icon--left {
  margin-right: 6px;
}
.ModalButtonGroup--vertical {
    margin-top: 40px;
    margin-bottom: 16px;
}
.ModalButtonGroup--vertical .Button {
    display: block;
    width: 220px;
    margin-right: auto;
    margin-left: auto;
}
.ModalButtonGroup--vertical .Button + .Button {
    margin-top: 28px;
}
.Modal-content--buttonGroupOnly .ModalButtonGroup--vertical {
    margin-top: 60px;
}
.ModalButtonGroup--horizontal {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 48px;
}
.ModalButtonGroup--horizontal .Button {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
/* only single Button */
.ModalButtonGroup--horizontal .Button:last-child:first-child {
    width: 220px;
    margin-right: auto;
    margin-left: auto;
    -webkit-flex: initial;
        -ms-flex: initial;
            flex: initial;
}
.ModalButtonGroup--horizontal .Button + .Button {
    margin-left: 16px;
}
.Modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 203;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
}

.Modal-wrapper.Modal-enter {
  opacity: .01;
}

.Modal-wrapper.Modal-enter-active {
  opacity: 1;
}

.Modal-wrapper.Modal-leave {
  opacity: 1;
}

.Modal-wrapper.Modal-leave-active {
  opacity: .01;
}

.Modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-color: rgba(0, 0, 0, .65);
  -webkit-transition: background-color 300ms ease-out;
  transition: background-color 300ms ease-out;
}

.Modal-wrapper--transparent .Modal-backdrop {
  background-color: transparent;
}

.Modal {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 400px;
  max-height: calc(100vh - 24px * 2);
  margin-right: auto;
  margin-left: auto;
  outline: 0;
  box-shadow: 0 5px 20px 0 rgba(0, 34, 77, .5);
  box-sizing: border-box;
  -webkit-transition: max-height 800ms ease;
  transition: max-height 800ms ease;
}

.Modal--large {
  width: 536px;
}

.Modal--fullPage {
  width: 688px;
  height: calc(100vh - 24px * 2);
}

.Modal-enter .Modal {
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.Modal-enter-active .Modal {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
  transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
  transition: transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out;
}

.Modal-leave .Modal {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.Modal-leave-active .Modal {
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
  transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
  transition: transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out;
}

.Modal-inner {
  overflow: auto;
  background: #fff;
  border-radius: 2px;
}

.Modal--fullPage .Modal-inner {
  height: 100%;
}

.Modal-inner--collapsed {
  overflow: hidden;
}

.Modal-inner.Modal-inner--hasSnackBar {
  position: relative;
  z-index: 1;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 0 0 #efeef5;
}

.Modal-closeButton {
  position: absolute;
  top: 8px;
  right: -60px;
  padding: 12px;
  cursor: pointer;
}

.Modal-closeIcon {
  vertical-align: top;
  fill: #fff;
}

.Modal-title {
  margin-top: 40px;
  font-size: 24px;
  font-weight: 500;
  color: #262626;
  text-align: center;
}

.Modal-title.Modal-title--simple {
  font-family: inherit;
  font-size: 20px;
}

.Modal-subtitle {
  padding: 0 38px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #8590a6;
  text-align: center;
}

.Modal-subtitle a {
  text-decoration: underline;
}

.Modal-content {
  position: relative;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 24px 32px;
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.7;
  opacity: 1;
}

.Modal--fullPage .Modal-content {
  padding: 0;
}

.Modal-content.Modal-content--spread {
  height: 100%;
  margin-top: 0;
}

.Modal-content.Modal-content--hidden {
  opacity: 0;
  -webkit-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
}

.Modal-footer {
  padding: 16px 24px;
  font-size: 13px;
  line-height: 1.7;
  color: #9aaabf;
  background: #f7f8fa;
  box-shadow: 0 1px 0 0 #ebeef5;
}

.Modal-snackbar {
  max-height: 80px;
  padding: 16px 24px;
  background: #f8f9fa;
  box-shadow: 0 0 2px 2px;
  -webkit-transition: max-height 400ms ease-out;
  transition: max-height 400ms ease-out;
}

.Modal-snackbar--collapsed {
  height: 0;
  max-height: 0;
  padding: 0;
  box-shadow: none;
}
.VagueImage {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f7f8fa;
}

.VagueImage-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  opacity: 1;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-transition: opacity 300ms ease-in;
  transition: opacity 300ms ease-in;
}

.VagueImage-canvas.is-active {
  opacity: 0;
}

.VagueImage-innerLarge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
/**
 * 富文本样式
 */

.RichText {
  word-break: break-word;
  white-space: pre-wrap;
}

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link) {
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid rgba(64, 64, 64, .72);
}

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link):hover {
  color: #175199;
  border-color: rgba(62, 122, 194, .72);
}

/* 优化过后的超级链接，隐藏 protocol 和 path */

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link) > .ellipsis::after {
  content: '...';
}

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link) > .invisible {/* .u-hideText */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
}

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link) u {
  border-color: transparent;
}

.RichText a.member_mention, .RichText a.UserLink-link {
  color: #175199;
}

.RichText a.member_mention:hover, .RichText a.UserLink-link:hover {
  border-bottom: 1px solid rgba(62, 122, 194, .72);
}

.RichText u {
  text-decoration: none;
  border-bottom: 1px solid rgba(64, 64, 64, .72);
}

.RichText u a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link) {
  border-color: transparent;
}

.RichText b {
  font-weight: 700;
}

.RichText h1, .RichText h2, .RichText h3, .RichText h4, .RichText h5, .RichText h6 {
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 18px;
  font-weight: 400;
}

.RichText p {
  margin-bottom: .8em;
}

/* 图片 */

.RichText .content_image,
  .RichText .origin_image {
  display: block;
  max-width: 100%;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.RichText .zh-lightbox-thumb {
  cursor: -webkit-zoom-in;
}

.RichText blockquote {
  padding-left: 1em;
  margin: 1em 0;
  color: #6b7a8c;
  border-left: 4px solid #cfd8e6;
}

.RichText blockquote a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link) {
  border-color: rgba(107, 122, 140, .72);
}

.RichText ul, .RichText ol {
  padding-left: 2em;
  margin: 1em 0;
}

.RichText ul li, .RichText ol li {
  list-style-position: outside;
}

.RichText ul ul, .RichText ol ol, .RichText ul ol, .RichText ol ul {
  margin: 0;
}

.RichText ul li {
  list-style-type: initial;
}

.RichText ol li {
  list-style-type: decimal;
}

/* 视频, 分享 */

.RichText .video-box, .RichText .link-box {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 16px;
  margin-bottom: 16px;
  overflow: auto;
  white-space: normal;
  cursor: pointer;
  border: solid 1px #e7eaf1;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 34, 77, .05);
}

.RichText .video-box .thumbnail, .RichText .link-box .thumbnail {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 90px;
  height: 90px;
  -o-object-fit: cover;
     object-fit: cover;
}

.RichText .video-box .content, .RichText .link-box .content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

.RichText .video-box .title, .RichText .link-box .title {
  font-size: 18px;
  font-weight: 400;
}

.RichText .video-box .url, .RichText .link-box .url {
  overflow: hidden;
  font-size: 15px;
  color: #8798ae;/* .u-ellipsis */
  text-overflow: ellipsis;
  word-wrap: normal;
  white-space: nowrap;
}

.RichText .video-box .label, .RichText .link-box .label {
  display: none;
}

/* 公式 */

.RichText img[eeimg] {
  max-width: 100%;
  vertical-align: middle;
}

.RichText img[eeimg="1"] {
  display: inline-block;
  margin: 0 3px;
}

/* 代码高亮 */

.RichText pre {
  padding-right: 1em;
  padding-left: 1em;
  margin: 1em 0;
  overflow: auto;
  font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;
  font-size: 14px;
  word-wrap: break-word;
  background: #ebeef5;
  border-radius: 4px;
}

/* 修改自 trac 主题 */

.RichText pre .hll {
  background-color: #ffc;
}

/* stylelint-disable declaration-block-single-line-max-declarations */

.RichText pre .c {
  font-style: italic;
  color: #998;
}

/* Comment */

.RichText pre .err {
  color: #a61717;
  background-color: #e3d2d2;
}

/* Error */

.RichText pre .k {
  font-weight: bold;
}

/* Keyword */

.RichText pre .o {
  font-weight: bold;
}

/* Operator */

.RichText pre .cm {
  font-style: italic;
  color: #998;
}

/* Comment.Multiline */

.RichText pre .cp {
  font-weight: bold;
  color: #999;
}

/* Comment.Preproc */

.RichText pre .c1 {
  font-style: italic;
  color: #998;
}

/* Comment.Single */

.RichText pre .cs {
  font-style: italic;
  font-weight: bold;
  color: #999;
}

/* Comment.Special */

.RichText pre .gd {
  color: #000;
  background-color: #fdd;
}

/* Generic.Deleted */

.RichText pre .ge {
  font-style: italic;
}

/* Generic.Emph */

.RichText pre .gr {
  color: #a00;
}

/* Generic.Error */

.RichText pre .gh {
  color: #999;
}

/* Generic.Heading */

.RichText pre .gi {
  color: #000;
  background-color: #dfd;
}

/* Generic.Inserted */

.RichText pre .go {
  color: #888;
}

/* Generic.Output */

.RichText pre .gp {
  color: #555;
}

/* Generic.Prompt */

.RichText pre .gs {
  font-weight: bold;
}

/* Generic.Strong */

.RichText pre .gu {
  color: #aaa;
}

/* Generic.Subheading */

.RichText pre .gt {
  color: #a00;
}

/* Generic.Traceback */

.RichText pre .kc {
  font-weight: bold;
}

/* Keyword.Constant */

.RichText pre .kd {
  font-weight: bold;
}

/* Keyword.Declaration */

.RichText pre .kn {
  font-weight: bold;
}

/* Keyword.Namespace */

.RichText pre .kp {
  font-weight: bold;
}

/* Keyword.Pseudo */

.RichText pre .kr {
  font-weight: bold;
}

/* Keyword.Reserved */

.RichText pre .kt {
  font-weight: bold;
  color: #458;
}

/* Keyword.Type */

.RichText pre .m {
  color: #099;
}

/* Literal.Number */

.RichText pre .s {
  color: #d32;
}

/* Literal.String */

.RichText pre .na {
  color: #008080;
}

/* Name.Attribute */

.RichText pre .nb {
  color: #008080;
}

/* Name.Builtin */

.RichText pre .nc {
  font-weight: bold;
  color: #458;
}

/* Name.Class */

.RichText pre .no {
  color: #008080;
}

/* Name.Constant */

.RichText pre .ni {
  color: #800080;
}

/* Name.Entity */

.RichText pre .ne {
  font-weight: bold;
  color: #900;
}

/* Name.Exception */

.RichText pre .nf {
  font-weight: bold;
  color: #900;
}

/* Name.Function */

.RichText pre .nn {
  color: #555;
}

/* Name.Namespace */

.RichText pre .nt {
  color: #000080;
}

/* Name.Tag */

.RichText pre .nv {
  color: #008080;
}

/* Name.Variable */

.RichText pre .ow {
  font-weight: bold;
}

/* Operator.Word */

.RichText pre .w {
  color: #bbb;
}

/* Text.Whitespace */

.RichText pre .mf {
  color: #099;
}

/* Literal.Number.Float */

.RichText pre .mh {
  color: #099;
}

/* Literal.Number.Hex */

.RichText pre .mi {
  color: #099;
}

/* Literal.Number.Integer */

.RichText pre .mo {
  color: #099;
}

/* Literal.Number.Oct */

.RichText pre .sb {
  color: #d32;
}

/* Literal.String.Backtick */

.RichText pre .sc {
  color: #d32;
}

/* Literal.String.Char */

.RichText pre .sd {
  color: #d32;
}

/* Literal.String.Doc */

.RichText pre .s2 {
  color: #d32;
}

/* Literal.String.Double */

.RichText pre .se {
  color: #d32;
}

/* Literal.String.Escape */

.RichText pre .sh {
  color: #d32;
}

/* Literal.String.Heredoc */

.RichText pre .si {
  color: #d32;
}

/* Literal.String.Interpol */

.RichText pre .sx {
  color: #d32;
}

/* Literal.String.Other */

.RichText pre .sr {
  color: #808000;
}

/* Literal.String.Regex */

.RichText pre .s1 {
  color: #d32;
}

/* Literal.String.Single */

.RichText pre .ss {
  color: #d32;
}

/* Literal.String.Symbol */

.RichText pre .bp {
  color: #999;
}

/* Name.Builtin.Pseudo */

.RichText pre .vc {
  color: #008080;
}

/* Name.Variable.Class */

.RichText pre .vg {
  color: #008080;
}

/* Name.Variable.Global */

.RichText pre .vi {
  color: #008080;
}

/* Name.Variable.Instance */

.RichText pre .il {
  color: #099;
}

/* Literal.Number.Integer.Long */

.RichText pre::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.RichText pre::-webkit-scrollbar-thumb:horizontal {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 6px;
}

.RichText pre::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: rgba(0, 0, 0, .6);
}

.RichText .katex-display {
  text-align: left;
}

body:not(.Body--isAppleDevice) .RichText h1, body:not(.Body--isAppleDevice) .RichText h2, body:not(.Body--isAppleDevice) .RichText h3, body:not(.Body--isAppleDevice) .RichText h4, body:not(.Body--isAppleDevice) .RichText h5, body:not(.Body--isAppleDevice) .RichText h6, body:not(.Body--isAppleDevice) .RichText b {
  font-weight: 700;
}

body:not(.Body--isAppleDevice) .RichText .video-box title, body:not(.Body--isAppleDevice) .RichText .link-box title {
  font-weight: 700;
}
.Input-wrapper {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 180px;
  height: 36px;
  padding: 4px 10px;
  overflow: hidden;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e7eaf1;
  border-radius: 3px;
  box-sizing: border-box;
  -webkit-transition: background 200ms, border 200ms;
  transition: background 200ms, border 200ms;
}

.Input-wrapper.Input-wrapper--grey {
  background: #f7f8fa;
}

.Input-wrapper.Input-wrapper--spread {
  width: 100%;
}

.Input-wrapper.Input-wrapper--multiline {
  height: inherit;
}

.Input-wrapper.Input-wrapper--large, .Input-wrapper .Editable-toolbar, .Input-wrapper .DraftEditor-root {
  height: auto;
  padding: 6px 12px;
}

.Input-wrapper.Input-wrapper--noPadding {
  padding: 0;
}

.Input-wrapper.is-focus {
  background: #fff;
  border: 1px solid #9fadc7;
}

.Input {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
}

input.Input {
  height: 26px;
}

.Input:not(input) {
  line-height: 26px;
}

.Input:-ms-input-placeholder {
  line-height: normal;
}

.Input::-webkit-input-placeholder, .Input .public-DraftEditorPlaceholder-root {
  color: #9fadc7;
}

.Input:-ms-input-placeholder, .Input .public-DraftEditorPlaceholder-root {
  color: #9fadc7;
}

.Input::placeholder, .Input .public-DraftEditorPlaceholder-root {
  color: #9fadc7;
}

.Input--validationError::-webkit-input-placeholder {
  color: #f75659;
}

.Input--validationError:-ms-input-placeholder {
  color: #f75659;
}

.Input--validationError::placeholder {
  color: #f75659;
}

.Input-after {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
}
.Popover {
  position: relative;
  display: inline-block;
}

.Popover-targetContainer, .Popover-targetContainer--reversed, .Popover-targetContainer--fade, .Popover-targetContainer--reversed--fade {
  position: absolute;
  z-index: 203;
}

.Popover-targetContainer-enter, .Popover-targetContainer--reversed-enter, .Popover-targetContainer--fade-enter, .Popover-targetContainer--reversed--fade-enter {
  opacity: .01;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
}

.Popover-targetContainer-enter-active, .Popover-targetContainer--reversed-enter-active, .Popover-targetContainer--fade-enter-active, .Popover-targetContainer--reversed--fade-enter-active {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.Popover-targetContainer-leave, .Popover-targetContainer--reversed-leave, .Popover-targetContainer--fade-leave, .Popover-targetContainer--reversed--fade-leave {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.Popover-targetContainer-leave-active, .Popover-targetContainer--reversed-leave-active, .Popover-targetContainer--fade-leave-active, .Popover-targetContainer--reversed--fade-leave-active {
  opacity: .01;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.Popover-targetContainer--reversed {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

.Popover-targetContainer--reversed-enter {
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.Popover-targetContainer--reversed-enter-active, .Popover-targetContainer--reversed-leave, .Popover-targetContainer--reversed-leave-active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.Popover-targetContainer--fade-enter, .Popover-targetContainer--fade-enter-active, .Popover-targetContainer--fade-leave, .Popover-targetContainer--fade-leave-active, .Popover-targetContainer--reversed--fade-enter, .Popover-targetContainer--reversed--fade-enter-active, .Popover-targetContainer--reversed--fade-leave, .Popover-targetContainer--reversed--fade-leave-active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.Popover-target {
  z-index: 2;
  margin: 0 auto;
  box-sizing: border-box;
}

.Popover-fixedTargetContainer {
  position: fixed;
}

.Popover-hiddenTargetContainer {
  display: none;
}
.Menu {
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e7eaf1;
  border-radius: 4px;
  box-shadow: 0 5px 20px rgba(0, 34, 77, .1);
}

.Menu-item {
  display: block;
  width: 100%;
  padding: 0 20px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.Menu-item.is-active {
  background: #f4f8fb;
}

.Menu-item--noActive {
  cursor: default;
}

.Menu--arrowed::before, .Menu--arrowed::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  width: 0;
  height: 0;
  margin: auto;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-radius: 1px;
  content: "";
}

.Menu--arrowed:not(.Menu--reversed)::before {
  top: -7px;
  border-bottom: 8px solid #e7eaf1;
}

.Menu--arrowed:not(.Menu--reversed)::after {
  top: -6px;
  border-bottom: 8px solid #fff;
}

.Menu--arrowed.Menu--reversed::before {
  bottom: -7px;
  border-top: 8px solid #e7eaf1;
}

.Menu--arrowed.Menu--reversed::after {
  bottom: -6px;
  border-top: 8px solid #fff;
}

.Menu-divider {
  margin: 8px 0;
  border-bottom: 1px solid #ebeef5;
}
.AutoComplete-DefaultItem {
  line-height: 40px;
}
.Avatar {
  background: #fff;
  border-radius: 2px;
}

.Avatar--medium {
  border-radius: 3px;
}

.Avatar--large {
  border-radius: 4px;
}

.Avatar--round {
  border-radius: 50%;
}
.AutoComplete-UserItem {
  width: 188px;
  height: 50px;
  padding: 9px 0;
  box-sizing: border-box;
}

.AutoComplete-UserDetail {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

.AutoComplete-UserName, .AutoComplete-UserHeadline {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AutoComplete-UserName {
  font-size: 14px;
  color: #262626;
}

.AutoComplete-UserHeadline {
  font-size: 12px;
  color: #8590a6;
}

.AutoComplete-UserAvatar {
  vertical-align: middle;
}
.AutoComplete-menu--hidden {
  visibility: hidden;
}
.Pagination {
  padding: 16px 24px;
  text-align: center;
}

.PaginationButton {
  padding: 0 15px;
  color: #262626;
  -webkit-transition: color 200ms;
  transition: color 200ms;
}

.PaginationButton:not(:disabled):hover {
  color: #175199;
}

.PaginationButton--current {
  color: #8590a6;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Button {
  border-radius: 4px;
  border-color: #b3b3b3;
  color: #808080;
}

.Button:active {
 background-color: #b3b3b3;
 color: #fff;
}

.Button:focus {
 outline: #f1f2f3 auto 5px;
}

/* for legacy iconfont */

.Button.icon {
 font-size: 24px;
 line-height: 1;
}

.Button .icon {
 vertical-align: -4px;
}

.Button[disabled] {
  border-color: #b3b3b3;
  color: #808080;
}

.Button[disabled].Button--blue {
 background-color: transparent;
}

.Button[disabled]:hover {
 background-color: transparent;
}

.Button--plain {
  color: #808080;
}

.Button--plain:active {
 color: #808080;
 background: transparent;
}

.Button--primary.Button--green {
 background-color: #50c87e;
 border-color: #50c87e;
}

.Button--primary.Button--green:hover {
 background-color: rgba(77, 190, 46, .06);
 color: #50c87e;
}

.Button--green {
  color: #50c87e;
  border-color: #50c87e;
}

.Button--green:active {
 background: #50c87e;
 color: #fff;
}

.Button--blue {
  border-color: #0080ff;
  color: #0080ff;
}

.Button--blue:active {
 background: #0080ff;
 color: #fff;
}

.Button--black {
  color: #333;
  border-color: #333;
}

.Button--black:hover {
 background-color: rgba(0,0,0,0.08);
}

.Button--black:active {
 background-color: #333;
 color: #fff;
}

.Button--red {
  border-color: #e26d6d;
  color: #e26d6d;
}

.Button--red:hover {
 background-color: rgba(226, 109, 109, .06);
}

.Button--red:active {
 background: #e26d6d;
 color: #fff;
}

html:not([data-focus-method="pointer"]) .Button:focus {
  box-shadow: none;
}

.Modal {
  position: relative;
  width: 340px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  line-height: 20px;
  font-size: 14px;
  color: #808080;
  background-color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.Modal-inner {
  background: transparent;
  display: block;
}

.Modal--large {
  width: 620px;
}

.Modal-title.Modal-title {
  margin: 0;
  height: 56px;
  line-height: 56px;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  padding-left: 16px;
}

.Modal-closeButton {
  right: 1em;
}

.Modal-closeIcon {
  max-width: 12px;
  fill: currentColor;
}

.Modal-backdrop {
  background-color: rgba(255, 255, 255, 0.9);
}

.Modal-content {
  margin-top: 10px;
  padding: 0 16px 16px;
}

.Modal-buttons {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 16px;
}

.Modal-buttons .Button {
 height: 32px;
 line-height: 30px;
 width: 72px;
 padding: 0;
}

.Modal-buttons .Button + .Button {
 margin-left: 16px;
}

.ModalButtonGroup--horizontal {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

@media (max-width: 660px) {
  .Modal-wrapper {
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  .Modal {
    width: 100%;
    border-radius: 0 0 6px 6px;
    border-width: 0 0 1px 0;
  }
}

.RichText {
  white-space: normal;
}

.RichText a,
  .RichText a:not(.video-box):not(.link-box):not(.member_mention) {
 color: #259;
 text-decoration: none;
 border-bottom: 0 !important;
}

.RichText a:hover, .RichText a:not(.video-box):not(.link-box):not(.member_mention):hover {
 text-decoration: underline;
 color: #259;
}

.RichText p {
 margin: 20px 0;
}

.RichText ul + br,
  .RichText ol + br,
  .RichText p + br {
 display: none;
}

.RichText h1,
  .RichText h2,
  .RichText h3,
  .RichText h4 {
 margin: 20px 0;
 font-size: 24px;
 font-weight: normal;
}

.RichText blockquote,
  .RichText ul,
  .RichText ol {
 margin: 20px 0 20px;
}

.RichText img {
 max-width: 100%;
 display: block;
 margin: 20px auto 30px;
}

.RichText blockquote {
 padding-left: 1.2em;
 border-left: 4px solid #e2e3e4;
 color: #333;
}

.RichText li {
 margin-top: 10px;
}

.RichText ul,
  .RichText ol {
 padding-left: 24px;
}

.RichText embed {
 width: 100%; /* height: $break / (16/9) + 40; */
}

.Menu-item .Button {
 padding: 0;
 margin: 0;
}

.Menu-item.is-active {
 background: #f7f8f9;
}

.Pagination {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.PaginationButton {
  height: 34px;
  line-height: 32px;
  width: 34px;
  margin: 0 8px;
  text-align: center;
  font-size: 15px;
  color: #808080;
  padding: 0;
  border-radius: 50%;
}

.PaginationButton + .PaginationButton {
 margin: 0 8px;
}

.PaginationButton:not(:disabled):not(.PaginationButton--fake):hover {
 background: transparent;
 border: 1px solid #808080;
 color: #333;
}

.PaginationButton--current {
  border: 1px solid #b3b3b3;
}

.PaginationButton-prev,
.PaginationButton-next {
  width: auto;
  padding: 0 10px;
}

.PaginationButton-prev:hover, .PaginationButton-next:hover {
 border: 0 !important;
}

@media (max-width: 660px) {
  .PaginationButton {
    display: none;
  }

  .PaginationButton-prev,
  .PaginationButton-next {
    display: block;
  }
}

.SimpleInput-wrapper {
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
  font-size: 16px;
  border: 0;
}

.SimpleInput-wrapper.is-focus {
 border: 0;
}

.SimpleInput,
.SimpleInput-wrapper .Input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: none;
  min-height: 40px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
  font-size: 14px;
  line-height: 20px;
  padding: 10px 4px 11px;
  margin-bottom: 2px;
  -webkit-transition: box-shadow ease-in-out .15s;
  transition: box-shadow ease-in-out .15s;
}

.SimpleInput:focus,
  .SimpleInput.Editable--focus,
  .SimpleInput-wrapper .Input:focus,
  .SimpleInput-wrapper .Input.Editable--focus {
 box-shadow: 0 2px 0 #0080ff;
}

.SimpleInput[disabled], .SimpleInput-wrapper .Input[disabled] {
 background: transparent;
}

.SimpleInput[disabled]:focus,
  .SimpleInput[disabled].Editable--focus,
  .SimpleInput-wrapper .Input[disabled]:focus,
  .SimpleInput-wrapper .Input[disabled].Editable--focus {
 box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
}

.SimpleInput::-webkit-input-placeholder, .SimpleInput-wrapper .Input::-webkit-input-placeholder {
 color: #b3b3b3;
}

.SimpleInput:-ms-input-placeholder, .SimpleInput-wrapper .Input:-ms-input-placeholder {
 color: #b3b3b3;
}

.SimpleInput::placeholder, .SimpleInput-wrapper .Input::placeholder {
 color: #b3b3b3;
}

.Input .public-DraftEditorPlaceholder-root {
  color: #b3b3b3;
}

.SimpleInput-wrapper--search {
  position: relative;
}

.SimpleInput-wrapper--search .SimpleInput,
  .SimpleInput-wrapper--search .Input {
 padding-left: 30px;
}

.SimpleInput-wrapper--search:before {
 content: '\E912';
 font-size: 24px;
 color: #808080;
 position: absolute;
 width: 24px;
 height: 24px;
 left: 4px;
 font-family: icomoon;
}

.Checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

.Checkbox:before {
 content: '\E92B';
 font-family: 'icomoon';
 color: #666768;
 font-size: 24px;
 vertical-align: -4px;
}

.Checkbox:checked:before {
 content: '\E92C';
 color: #0080ff;
}

.Checkbox:hover:before{
 color: #0080ff;
}

.Radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  outline: none;
}

.Radio:before {
 content: '\E90F';
 font-family: 'icomoon';
 color: #666768;
 font-size: 24px;
 vertical-align: -4px;
}

.Radio:checked:before {
 content: '\E910';
 color: #0080ff;
}

.Radio:hover:before{
 color: #0080ff;
}

.DraftEditor-editorContainer div {
 display: block;
}

.AutoComplete-UserItem {
  width: 100%;
}

.AutoComplete-UserDetail {
  display: block;
}

.AutoComplete-UserHeadline {
  display: none;
}

.ImageView-inner {
  display: block;
}

.AutoComplete-UserItem {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.FavlistsModal {
  width: 400px;
}

@media (max-width: 660px) {

 .FavlistsModal {
  width: 100%;
 }
}

.Favlists-content .CheckItem-input {
 visibility: hidden;
}

.Favlists-actions {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.Favlists-addIcon {
  box-sizing: content-box;
}
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}
#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}
#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}
@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

.LoginModal-loginButon {
  margin: 0 70px;
  height: 38px;
  line-height: 36px;
}

.LoginModal-registerButton {
  margin: 24px 0;
}

.LoginModal-registerButton .icon {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  display: inline-block;
}
.StaticCacheBanner {
  position: relative;
  z-index: 100;
  padding: 16px 10px;
  line-height: 28px;
  color: #8590a6;
  text-align: center;
  background-color: #e7eaf1;
}
.StaticCacheBanner a {
  color: #175199;
  -webkit-transition: border-bottom 200ms ease-in;
  transition: border-bottom 200ms ease-in;
}
.StaticCacheBanner a:hover {
  border-bottom: 1px solid rgba(23, 81, 153, .72);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

/* FIXME name conflict with zhihu-components */

.Menu {
  position: relative;
  border: 0;
  box-shadow: none;
}

.Menu-dropdown,
.Popover-targetContainer .Menu {
  position: absolute;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  line-height: 54px;
  font-size: 14px;
  text-align: left;
  color: #333;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .1s;
  transition: all .1s;
}

.Menu-dropdown li, .Popover-targetContainer .Menu li {
 padding: 0;
}

.Menu-dropdown li > .Button,
    .Menu-dropdown li > a,
    .Popover-targetContainer .Menu li > .Button,
    .Popover-targetContainer .Menu li > a {
 padding: 0 16px;
 width: 100%;
 height: auto;
 line-height: 42px;
 text-align: left;
 display: block;
 color: #333;
}

.Menu-dropdown li:hover, .Popover-targetContainer .Menu li:hover {
 background: #f7f8f9;
}

.Menu-dropdown li:first-child, .Popover-targetContainer .Menu li:first-child {
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
}

.Menu-dropdown li:last-child, .Popover-targetContainer .Menu li:last-child {
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
}

.Menu-dropdown a, .Popover-targetContainer .Menu a {
 display: block;
}

.Popover-targetContainer .Menu {
  visibility: visible;
  opacity: 1;
  padding: 0;
  width: 180px;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

.Popover-targetContainer .Menu .Menu-item {
 padding: 0 0 0 16px;
}

.Popover-targetContainer .Menu .Menu-item .AutoComplete-UserItem {
 -webkit-flex-direction: row;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-align-items: center;
     -ms-flex-align: center;
         align-items: center;
}

.MenuButton-listen-hover ~ .Menu-dropdown {
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

/* keep specificity same for easier override */

.Menu--open > .Menu-dropdown {
  visibility: visible;
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
.Triangle {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
}

.Triangle-inner,
.Triangle-outer {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: content-box;
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
}

.Triangle--up .Triangle-inner,
  .Triangle--up .Triangle-outer {
  border-bottom-color: currentColor;
}

.Triangle--up .Triangle-outer {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.Triangle--down .Triangle-inner,
  .Triangle--down .Triangle-outer {
  border-top-color: currentColor;
}

.Triangle--down .Triangle-outer {
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

/* TODO other directions */
.ColumnFollowButton {
  width: 92px;
}
.Avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.Avatar--s {
  width: 26px;
  height: 26px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Navbar {
  contain: layout;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 59px;
  width: 100%;
  border-bottom: 1px solid transparent;
  color: #808080;
  background: rgba(255,255,255,.97);
  will-change: transform;
  z-index: 2;
  position: relative;
}

.Navbar a {
 -webkit-transition: color .2s;
 transition: color .2s;
}

.Navbar a:hover {
 text-decoration: none;
 color: #333;
}

.Navbar.ScrollBackFixed {
  position: fixed;
  border-color: rgba(0,0,0,0.08);
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  will-change: transform;
}

.Navbar.ScrollBackFixed-active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.Navbar.ScrollBackFixed-animation {
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}

.Navbar-logo-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 58px;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
              -ms-grid-row-align: stretch;
          align-self: stretch;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.Navbar-logo {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 58px;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: gray;
  -webkit-transition: color .05s ease-in-out;
  transition: color .05s ease-in-out;
}

.Navbar-title {
  margin: 0 auto;
  width: 660px;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
}

.Navbar-columnIcon {
  -webkit-flex: 0 0 38px;
      -ms-flex: 0 0 38px;
          flex: 0 0 38px;
  height: 38px;
  margin-right: 12px;
  border-radius: 50%;
}

.Navbar-postTitleName {
  line-height: 15px;
}

.Navbar-postTitleMeta {
  font-size: 13px;
  color: #808080;
  margin-bottom: 3px;
}

.Navbar-postTitleMain {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: #333;
  max-width: 420px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.Navbar-columnTitle {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.Navbar.showColumnTitle .Navbar-columnTitle {
  opacity: 1;
  visibility: visible;
}

.Navbar-columnTitleMain {
  color: #333;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.Navbar-followBtn {
  margin-left: 1em;
  height: 32px;
  line-height: 1;
}

.Navbar-functionality {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 58px;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
              -ms-grid-row-align: stretch;
          align-self: stretch;
}

.Navbar-write {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 10px;
  white-space: nowrap;
}

.Navbar-write .icon {
 margin-right: 3px;
}

.Navbar-menu {
  width: 66px;
  -webkit-flex: 0 0 66px;
      -ms-flex: 0 0 66px;
          flex: 0 0 66px;
  text-align: center;
  -webkit-transition: color .2s;
  transition: color .2s;
}

.Navbar-menu:hover {
 color: #333;
}

.Navbar-menu .MenuButton {
 -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
         flex-grow: 1;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-align-items: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-justify-content: center;
     -ms-flex-pack: center;
         justify-content: center;
}

.Navbar-menu .MenuButton:hover {
 color: #333;
}

.Navbar-menu .Menu-dropdown {
 top: 100%;
 right: 20px;
 width: 220px;
}

.Navbar-menu .Menu-item {
 height: 54px;
 white-space: nowrap;
}

.Navbar-menu .Menu-item > * {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-align-items: center;
     -ms-flex-align: center;
         align-items: center;
 height: 100%;
 margin-right: 16px;
}

.Navbar-menu .Menu-item .Avatar {
 margin-right: 16px;
 -webkit-flex: 0 0 36px;
     -ms-flex: 0 0 36px;
         flex: 0 0 36px;
}

.Navbar-menu .Triangle {
 position: absolute;
 top: 0;
 right: 1px;
 -webkit-transform: translate3d(-50%, -100%, 0);
         transform: translate3d(-50%, -100%, 0);
}

.Navbar-menu .Menu-item:first-child:hover .Triangle-inner {
 border-bottom-color: #f7f9f9;
}

.Navbar-menuItem--split {
  position: relative;
}

.Navbar-menuItem--split:before {
 content: '';
 position: absolute;
 left: 16px;
 right: 16px;
 height: 1px;
 background: rgba(0,0,0,0.08);
 top: -1px;
}

@media (max-width: 760px) {
  .Navbar-logo-wrapper,
  .Navbar-functionality {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .Navbar-title {
    position: relative;
    -webkit-flex: 1 0 0;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
    padding-left: 16px;
    padding-right: 16px;
    min-height: 24px;
    overflow: hidden;
    margin-left: 56px;
  }
  .Navbar-title::before {
    content: '';
    height: 24px;
    width: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    background: rgba(0, 0, 0, .16);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .Navbar-postTitleName {
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
    overflow: hidden;
  }
  .Navbar-columnIcon,
  .Navbar-followBtn {
    display: none;
  }
}

@media (max-width: 420px) {
  .Navbar-write {
    display: none;
  }
}

.Navbar-me {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 16px;
}

.Navbar-me img {
 width: 36px;
 height: 36px;
 margin-right: 10px;
}

.Navbar-loginButon {
  height: 32px;
  line-height: 30px;
  margin: 0 16px 0 6px;
  width: 72px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Layout {
  min-height: 660px;
}

.Layout-navbarHolder {
  height: 59px;
}

.Layout-main {
  margin: 47px auto 0;
  padding: 0 0;
  width: 660px;
  z-index: 1;
}

@media (max-width: 660px) {

 .Layout-main {
  width: 100%;
  margin-top: 35px;
 }
}

.GlobalAlert {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -230px;
  width: 460px;
  height: 84px;
  line-height: 84px;
  color: #666768;
  z-index: 19;
  border: solid rgba(0, 0, 0, .08);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  z-index: 102;
}

.GlobalAlert i {
 width: 24px;
 height: 24px;
 margin-right: 8px;
 display: inline-block;
}

.GlobalAlert.sticky {
 position: fixed;
 top: 0;
}

.GlobalAlert-info i {
  color: #50c87e;
}

.GlobalAlert-error i {
  color: #e26d6d;
}

.GlobalAlert--margin {
  top: 59px;
}

.StaticCacheBanner {
  display: block;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.BlockTitle {
  position: relative;
  display: block;
  margin-bottom: 32px;
  line-height: 22px;
}

.BlockTitle-title {
  position: relative;
  display: inline;
  padding-right: 16px;
  font-weight: 700;
  background: #fff;
  z-index: 1;
}

.BlockTitle-line {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  color: #f0f0f0;
  background: currentColor;
}

@media (max-width: 660px) {
  .BlockTitle {
    margin-left: 16px;
  }
}
.Home-blockTitle {
  width: 500px;
  margin: 0 auto 30px;
  text-align: center;
}
.Home-blockTitle .BlockTitle-title {
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
}
.Home-blockTitle .BlockTitle-line {
  color: #d9d9d9;
}
.ImageView {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  overflow: hidden;
  -webkit-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}

.ImageView.is-active {
  background-color: rgba(255, 255, 255, .9);
}

.ImageView-inner {
  height: 100%;
  box-sizing: border-box;
}

.ImageView-img {
  cursor: zoom-out;
  -webkit-transition: -webkit-transform 300ms ease-in-out;
  transition: -webkit-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}
.OpenInAppButton {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 50%;
  z-index: 100;
  width: 105px;
  font-size: 15px;
  font-weight: 500;
  line-height: 36px;
  color: #fff;
  text-align: center;
  background: #0084ff;
  border-radius: 18px;
  -webkit-transform: translate(-50%, 200%);
          transform: translate(-50%, 200%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  -webkit-transition: -webkit-transform .6s .6s;
  transition: -webkit-transform .6s .6s;
  transition: transform .6s .6s;
  transition: transform .6s .6s, -webkit-transform .6s .6s;
}

.OpenInAppButton.is-shown {
  -webkit-transform: translate(-50%, -25px);
          transform: translate(-50%, -25px);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TitleImage {
  display: block;
}

.Layout-titleImage--normal .TitleImage {
 margin-bottom: 22px;
}

.TitleImage-image {
  background: #b3b3b3 no-repeat center center;
  background-size: cover;
}

.TitleImage-image--full {
  width: 100vw;
  height: calc(100vh - 59px);
  margin-left: calc(660px / 2 - 50vw);
}

.TitleImage-image--full::after {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, .16);
}

.TitleImage-imagePure {
  width: 100%;
}

@media (max-width: 660px) {
  .TitleImage-imagePure--fixed {
    height: auto !important;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TPass {
  display: inline-block;
  border-color: #ccc;
}

.TPass-wrapper {
  display: inline-block;
  position: relative;
  font-size: 14px;
  color: #666;
  border-color: inherit;
}

.TPass-input {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: 1px;
  margin-left: 1px;
  padding: 0;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 3px;
  line-height: 32px;
  text-align: center;
  color: currentColor;
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
  color: #808080;
}

.TPass-input::-webkit-inner-spin-button,
  .TPass-input::-webkit-outer-spin-button {
 -webkit-appearance: none;
         appearance: none;
}

.TPass-input:focus {
  opacity: 1;
}

.TPassBoxes {
  display: inline-block;
  border: 1px solid;
  border-color: inherit;
  border-radius: 3px;
  line-height: 1;
  vertical-align: top;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.TPassBox {
  box-sizing: border-box;
  display: inline-block;
  width: 32px;
  height: 32px;
  border-left: 1px solid;
  border-left-color: inherit;
  line-height: 32px;
  text-align: center;
  vertical-align: top;
}

.TPassBoxes:first-child {
  border-left: 0;
}

.TPassBox-mask::before {
/* default masked box style */
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: currentColor;
  color: #808080;
}

.TPassBoxes,
.TPassBox {
  -webkit-transition: border-color .1s;
  transition: border-color .1s;
}
.Spinner {
  contain: strict;
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.Spinner::after {
  content: '\E91A';
  display: inline-block;
  font-size: 24px;
  font-family: 'icomoon';
  -webkit-animation: spinner .8s infinite;
          animation: spinner .8s infinite;
  vertical-align: -4px;
}

@-webkit-keyframes spinner {
  0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spinner {
  0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.Payment {
  font-size: 14px;
  text-align: center;
  color: #666;
}

.Payment-placeholder {
  height: 20px;
  padding: 70px;
  text-align: center;
}

.Payment-placehoder--empty {
  margin-bottom: -16px;
}

.PaymentsList {
  text-align: left;
  margin: 0 -16px -16px;
}

.PaymentItem {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding-left: 15px;
  height: 70px;
  line-height: 70px;
  cursor: pointer;
  border-top: 1px solid #ebeaea;
}

.PaymentItem:hover {
  background: #fafafa;
}

.PaymentItem .icon {
  vertical-align: -4px;
  margin-right: 6px;
}

.PaymentItem--disabled {
  color: #999999;
  pointer-events: none;
}

.Payment-wechatPay,
.Payment-balancePay {
  line-height: 40px;
  padding-top: 20px;
  padding-bottom: 8px;
  border-top: 1px solid #ebeaea;
}

.Payment-wechatPay .icon, .Payment-balancePay .icon {
  margin-right: 6px;
}

.Payment-wechatPayTitle,
.Payment-balancePayTitle {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.PaymentIconWechat {
  color: #33ad37;
}

.PaymentIconWallet {
  color: #0f88eb;
}

.PaymentItem--disabled .PaymentIconWallet {
  color: #999;
}

.Payment-balancePaySms {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
}

.Payment-balancePaySmsText {
  -webkit-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}

.Payment-sms {
  -webkit-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}

.Payment-sendSms {
  position: absolute;
  right: 0;
  top: 44px;
  border: none;
  line-height: 33px;
  color: currentColor;
  background: none;
}

.Payment-sendSms:hover {
  text-decoration: underline;
  cursor: pointer;
}

.Payment-sendSms[disabled] {
  color: #999;
  cursor: not-allowed;
}

.Payment-qrWrapper,
.Payment-qrPlaceholder {
  margin: 0 auto;
  width: 115px;
  height: 115px;
  color: #999;
}

.Payment-qrWrapper i, .Payment-qrPlaceholder i {
  margin: 20px;
}

.Payment-qrWrapper img, .Payment-qrPlaceholder img {
  width: 115px;
  height: 115px;
}

.Payment-qrPlaceholder {
  padding-top: 30px;
}

.Payment-qrPlaceholder img {
  position: absolute;
  bottom: 0;
  opacity: .01;
}

.Payment-balancePay {

}

.Payment-balancePayFooter {
  padding: 20px 0 0;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.Payment-balancePayConfirmBtn {
  width: 60px;
  padding: 0;
}

.Payment-balancePayForget {
  font-size: 12px;
  line-height: 33px;
  color: #999;
}

.Payment-errorTip {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: #c33;
  text-align: left;
  line-height: 36px;
}

.Payment-errorInput {
  border-color: #ffb3ba;
}

.Payment-errorInput .TPass-wrapper {
  color: #ffb3ba;
}

.Payment-errorInput input {
  outline-color: #ffb3ba;
}

/* 支付密码 */

.Payment-tpass {
  position: relative;
  line-height: normal;
}

.Payment-tpass .TPass-wrapper {
  color: #ccc;
}

.Payment-progressing .TPass-wrapper {
  visibility: hidden;
}

.Payment-balancePaySpinner {
  margin-top: -24px;
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}
.HoverTitle {
  position: relative;
}

.HoverTitle:hover::before,
.HoverTitle:hover::after,
.HoverTitle:focus::before,
.HoverTitle:focus::after {
  -webkit-animation: hoverTitleFadeIn 100ms linear forwards;
          animation: hoverTitleFadeIn 100ms linear forwards;
}

.HoverTitle:hover::before,
.HoverTitle:hover::after {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.HoverTitle::before,
.HoverTitle::after {
  content: '';
  position: absolute;
  left: 50%;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
}

.HoverTitle::before {
  top: 22px;
  width: 0;
  height: 0;
  margin: 0 0 0 -6px;
  font-size: 0;
  color: rgba(0, 0, 0, .8);
  border-bottom: 6px solid currentColor;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.HoverTitle::after {
  content: attr(data-hover-title);
  top: 28px;
  padding: 10px 16px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.5;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, .8);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@-webkit-keyframes hoverTitleFadeIn {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}

@keyframes hoverTitleFadeIn {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}

.HoverTitle--slim::before {
  top: 28px;
}

.HoverTitle--slim::after {
  top: 34px;
  padding: 3px 8px;
  line-height: 1.8;
}
.IconWeibo {
  color: #e16a70;
}
.IconWechat {
  color: #81d300;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Tipjar {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #666768;
  font-size: 14px;
  margin-bottom: 40px;
}

.Tipjar-button {
  margin: 8px 0 34px;
  padding: 0;
  background-color: #e26d6d;
  border-color: #e26d6d;
  color: #fff;
  width: 80px;
  height: 36px;
}

.Tipjar-button:hover {
 background-color: #e26d6d;
 color: #fff;
}

.Tipjar-button .Spinner::after {
 font-size: 20px;
}

.Tipjar-tagLine {
  margin: 20px 0;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.Tipjar-stateDescription {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  text-align: center;
  line-height: 25.2px;
}

.Tipjaror-list {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 320px;
  margin-top: 16px;
}

.Tipjaror-avatar {
  margin: 0 8px 8px 0;
  width: 26px;
  height: 26px;
}

.Tipjaror-avatar img {
 width: 26px;
 height: 26px;
}

.Tipjaror-more {
  background: rgba(0, 0, 0, .06);
  color: #b3b3b3;
  border-radius: 50%;
}

.Tipjaror-more .Spinner::after {
 font-size: 16px;
 vertical-align: 0;
}

.TipjarDialog-user {
  font-size: 16px;
  color: #333;
  font-weight: 700;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 16px 0 0;
}

.TipjarDialog-user .UserAvatar {
 margin-right: 12px;
}

.TipjarDialog-tagLine {
  background: #f6f6f6;
  border-radius: 4px;
  padding: 5px 10px;
  color: #808080;
  margin-bottom: 26px;
  position: relative;
}

.TipjarDialog-tagLine .Triangle {
 position: absolute;
 top: -11px;
 left: 6px;
}

.TipjarDialog-currentAmount {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.TipjarDialog-currentAmount .Button {
 width: 28%;
 color: #fff;
 border-color: #e26d6d;
 background: #e26d6d;
 opacity: 1;
}

.TipjarDialog-currentAmount .Button:hover {
 background: #e26d6d;
}

.TipjarDialog-currentAmount .Button b {
 font-weight: 700;
 font-size: 16px;
 margin-right: 2px;
}

.TipjarDialog-amountList {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.TipjarDialog-amountList .Button {
 width: 28%;
 margin: 0 0 24px;
 font-size: 13px;
}

.TipjarDialog-amountList b {
 margin-right: .2em;
 font-size: 16px;
}

.TipjarDialog-amountCustom {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.TipjarDialog-amountCustom .SimpleInput {
 -webkit-flex: 1;
     -ms-flex: 1;
         flex: 1;
 min-height: 0;
 height: 32px;
 padding: 0 4px;
}

.TipjarDialog-customButton {
  color: #e26d6d;
}

.TipjarDialog-amountInput {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
}

.TipjarDialog-amountInput .Button {
 margin-left: 20px;
 height: 32px;
 line-height: 30px;
}

.TipjarDialog-error {
  color: #e26d6d;
  margin-top: 6px;
  visibility: hidden;
  -webkit-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.TipjarSuccessModal .Modal-inner {
 overflow: visible;
}

.TipjarSuccessDialog {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.TipjarSuccess-icon {
  color: #50c87e;
  font-size: 40px;
  margin: 40px 0 16px;
}

.TipjarSuccess-description {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 16px;
}

.TipjarSuccess-description a {
 color: #259;
}

.TipjarSuccess-description a:hover {
 text-decoration: underline;
}

.TipjarSuccess-share {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #edeeef;
}

.TipjarSuccess-shareText {
  color: #333;
  margin-bottom: 20px;
}

.TipjarSuccess-shareList {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.TipjarSuccess-shareList > * {
 margin: 0 20px;
}

.TipjarSuccess-shareList .Menu-dropdown {
 top: 100%;
 margin-left: -15px;
}

.TipjarSuccess-shareList .Menu-dropdown .Menu-item {
 cursor: default;
}

.TipjarSuccess-shareList .Menu-dropdown .Menu-item:hover {
 background: transparent;
}

.TipjarSuccess-shareList .Menu-dropdown img {
 display: block;
 padding: 10px;
 width: 120px;
 height: 120px;
}

.TipjarEditDialog-tips {
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.TipjarEditDialog-tipsError {
  color: #e26d6d;
}

.TipjarEditDialog-agreement a {
 color: #0080ff;
}

.TipjarEditDialog-agreement a:hover {
 text-decoration: underline;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostShare .MenuButton {
 font-size: 15px;
 font-weight: normal;
}

.PostShare .Menu-dropdown {
 top: 100%;
 width: 134px;
 left: 50%;
 margin-left: -66px;
}

.PostShare .Menu-item {
 border-top: 1px solid rgba(0,0,0,0.08);
}

.PostShare .Menu-item:first-child {
 border-top: 0;
}

.PostShare-qrCode {
  width: 99px;
  height: 99px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Tabs {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 2px solid rgba(0,0,0,0.08);
  margin-bottom: 32px;
}

.Tab {
  margin-right: 16px;
  line-height: 64px;
  color: #333;
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}

.Tab .Button {
 padding: 0 16px;
 color: #333;
 font-size: 16px;
}

.Tab.is-active {
  border-bottom: 2px solid #0080ff;
  color: #0080ff;
}

.Tab.is-active .Button {
 color: #0080ff;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.CommentEditor {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.CommentEditor-avatar {
  margin-right: 16px;
}

.CommentEditor-input {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.CommentEditor-input .Input {
 min-height: 46px;
 margin-bottom: 0;
 padding-top: 5px;
 padding-bottom: 0;
}

.CommentEditor-input .DraftEditor-root .Editable-unstyled:not(:last-child) {
 margin-bottom: 0;
}

.CommentEditor-input .RichText a:not(.video-box):not(.link-box) {
 margin-right: 3px;
 color: #0080ff;
 text-decoration: none;
}

.CommentEditor-input .RichText a:not(.video-box):not(.link-box):hover {
 color: #0080ff;
 text-decoration: underline;
}

.CommentEditor-input--focus .Input-wrapper {
 border-color: rgba(0, 128, 255, .5);
}

.CommentEditor-actions {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 20px;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.CommentEditor-actions .Button {
 width: 80px;
 height: 34px;
 margin-left: 16px;
}
.ReportMenu-inner {
  min-height: 192px;
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 1.75;
}

.ReportMenu-item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 0;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f7;
  outline: none;
}

.ReportMenu-itemValue {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.ReportMenu-itemCheck {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.ReportMenu-itemCheck:checked + .ReportMenu-itemCheckIcon {
  opacity: 1;
}

.ReportMenu-itemCheckIcon {
  fill: #0f88eb;
  opacity: 0;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}

.ReportMenu-paragraph {
  white-space: pre-wrap;
  list-style: none;
}

.ReportMenu-paragraph--light {
  margin-top: 1em;
  color: #8590a6;
}

.ReportMenu-check {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.ReportMenu-textarea {
  width: 100%;
}

.ReportMenu-link {
  color: #175199;
}

.ReportMenu-link:hover {
  text-decoration: underline;
}

.ReportMenu-link--light {
  text-decoration: underline;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Report {
  margin-top: 6px;
}

.ReportButton {
  font-size: 15px;
  font-weight: normal;
}

.ReportModal {
  width: 400px;
}

@media (max-width: 660px) {

 .ReportModal {
  width: 100%;
 }
}

.ReportModal .ReportMenu-inner div {
 display: block;
}

.ReportModal .ReportMenu-inner .Input-wrapper {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

.ReportModal .Modal-title {
 margin-top: 3px;
 text-align: center;
 padding-left: 0;
}

.ReportModal .Modal-subtitle {
 display: none;
}

.ReportModal .Modal-content {
 padding: 0 24px 32px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.CommentItem {
  position: relative;
  padding-left: 60px;
  margin-top: 32px;
}

.CommentItem--deleted {
  border: solid #f0f0f0;
  border-width: 1px 0;
  padding: 16px 0;
}

.CommentItem--deleted + .CommentItem--deleted {
 border-top: 0;
 margin-top: 0;
}

.CommentItem-author {
  position: absolute;
  left: 0;
}

.CommentItem-authorTitle {
  color: #808080;
}

.CommentItem-headWrapper {
  position: relative;
}

.CommentItem-headWrapper a {
 color: #333;
 font-weight: 700;
}

.CommentItem-head {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  line-height: 24px;
}

.CommentItem-head--rightPad {
  margin-right: 86px;
}

.CommentItem-context {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CommentItem-replySplit {
  margin: 0 6px;
}

.CommentItem-conversationButton {
  position: absolute;
  right: 0;
  height: 24px;
  line-height: 24px;
}

.CommentItem-reviewingBadge {
  margin-left: 6px;
}

.CommentItem-reviewingMenu {
  padding: 0;
}

.CommentItem-reviewingMenu .MenuButton {
 height: 24px;
 width: 24px;
 padding: 0;
}

.CommentItem-reviewingMenu .MenuButton .icon {
 vertical-align: 0;
}

.CommentItem-reviewingMenu .Menu-dropdown {
 top: 36px;
 margin-left: -134px;
 width: 272px;
}

.CommentItem-reviewingMenu .Menu-item {
 white-space: nowrap;
 text-indent: 0;
 text-align: center;
}

.CommentItem-reviewingMenu .Menu-item:hover {
 cursor: default;
 background: transparent;
}

.CommentItem-reviewingMenu .Triangle {
 position: absolute;
 top: 1px;
 left: 50%;
 -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
}

.CommentItem-content {
  min-height: 22px;
  margin: 8px 0;
  font-size: 15px;
  line-height: 24px;
  word-break: break-word;
}

.CommentItem-content a {
 color: #259;
}

.CommentItem-content a:hover {
 text-decoration: underline;
}

.CommentItem-foot {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  color: #808080;
  font-size: 14px;
  line-height: 30px;
}

.CommentItem-like {
  position: absolute;
  right: 0;
}

.CommentItem-like--empty {
  display: none;
}

.CommentItem-action {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  line-height: 30px;
  display: none;
  margin-left: 8px;
}

.CommentItem-action + .CommentItem-action {
 margin-left: 8px;
}

.CommentItem:hover .CommentItem-action {
 display: block;
}

.CommentItem-action.Button:hover, .CommentItem-action .Button:hover {
 color: #333;
}

.CommentItem-action--visible {
  display: block;
}

.CommentItem-inlineReply {
  padding: 20px 0;
}

.CommentItem-actionReport {
  margin: 0;
}

.CommentItem-actionReport .ReportButton {
 font-size: 14px;
}

@media (max-width: 420px) {
  .CommentItem .icon {
  display:none;
 }

  .CommentItem-action {
    display: block;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostComment {
  padding-bottom: 48px;
}

.PostComment .PostComment-mainEditor .CommentEditor-actions {
 display: none;
}

.PostComment .PostComment-mainEditor.CommentEditor--opened .CommentEditor-actions {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

.PostComment-blockTitle,
.PostComment-titleTabs {
  position: relative;
  z-index: 3;
}

.PostComment-orgTab {
  position: relative;
}

.PostCommentDisabled {
  padding: 13px 0;
  background: #f7f8f9;
  color: #808080;
  text-align: center;
  border-radius: 4px;
  font-size: 15px;
}

.PostComment .CommentEditor + .PostCommentDisabled{
  margin-top: 24px;
}

.PostCommentList {
  margin-top: 32px;
}

.PostCommentList .CommentItem:first-child {
 margin-top: 0;
}

.PostCommentList--loading {
  position: relative;
}

.PostCommentList--loading::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 100%;
 background: rgba(255, 255, 255, .8);
 z-index: 1;
}

.PostComment-spinner {
  margin: 30px;
}

.PostCommentList-spinner {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
}

.PostComment-split {
  font-size: 14px;
  margin: 32px auto 0;
  width: 500px;
  text-align: center;
}

.PostComment-split .BlockTitle-title {
 padding: 0 16px;
 font-weight: 400;
 color: #808080;
}

.PostComment-pagination {
  margin-top: 16px;
}

.ConversationDialog .Spinner {
 margin: 120px auto;
}

.ConversationDialog-list {
  max-height: calc(60vh - 80px);
  overflow: auto;
  padding-bottom: 40px;
}

.ConversationDialog-list .CommentItem {
 padding-right: 16px;
}

.ConversationDialog-list .CommentItem .CommentItem-like {
 right: 16px;
}

.ConversationDialog-list .CommentItem:first-child {
 margin-top: 0;
}

.ConversationDialog-editor {
  padding: 16px;
  margin: 24px -16px -16px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

.PostCommentSetting-menu {
  display: inline-block;
}

.PostCommentSetting-menu .Menu-dropdown {
 width: 278px;
 margin-left: -120px;
 top: 100%;
}

.PostCommentSetting-menu .Menu-dropdown li > .Button {
 padding: 0;
}

.PostComment-orgTab .PostCommentSetting-menu {
 position: absolute;
 top: 20px;
 right: 0;
 z-index: 4;
}

.PostCommentSetting-button {
  margin-left: 6px;
}

.PostCommentSetting-label {
  display: block;
  padding-left: 10px;
  height: 54px;
  line-height: 54px;
  font-weight: 400;
  cursor: pointer;
}

@media (max-width: 660px) {
  .PostComment-mainEditor,
  .PostCommentList {
    padding-left: 16px;
    padding-right: 16px;
  }

  .PostComment-split {
    width: 100%;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostReviewComment {
  position: fixed;
  top: 75px;
  right: 16px;
  height: 70vh;
  width: 240px;
  padding-bottom: 60px;
  z-index: 4;
}

.PostReviewComment--close {
  height: auto;
  padding-bottom: 0;
}

.PostReviewComment--close .PostReviewComment-editor,
  .PostReviewComment--close .PostReviewComment-list,
  .PostReviewComment--close .PostReviewComment-description,
  .PostReviewComment--close .PostReviewComment-empty {
 display: none;
}

.PostReviewComment-description {
  font-size: 12px;
  height: 12px;
  line-height: 12px;
  padding-left: 16px;
  margin-bottom: 10px;
}

.PostReviewComment-editor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 6px 16px 16px;
  border-top: 1px solid rgba(0, 0, 0, .16);
}

.PostReviewComment-editor .Editable {
 min-height: auto;
}

.PostReviewComment-editor .RichText {
 min-height: auto !important;
}

.PostReviewComment-editor .DraftEditor-root {
 padding-left: 0;
}

.PostReviewComment-editor .CommentEditor-actions {
 display: none;
}

.PostReviewComment-editor--opened .CommentEditor-actions {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

.PostReviewComment-list {
  padding: 0 13px 0 16px;
  height: calc(70vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.PostReviewComment-list .Spinner {
 margin: 30px auto;
}

.PostReviewComment-empty {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #b3b3b3;
}

.PostReviewComment-empty i {
 font-size: 64px;
}

.PostReviewComment-list--editorOpen {
  height: calc(70vh - 194px);
}

.PostReviewCommentItem {
  padding-left: 0;
  position: relative;
}

.PostReviewCommentItem:first-child {
 margin-top: 0;
}

.PostReviewCommentItem .CommentItem-headWrapper,
  .PostReviewCommentItem .CommentItem-foot {
 padding-left: 60px;
}

.PostReviewCommentItem .CommentItem-head {
 height: 36px;
 line-height: 20px;
 padding-bottom: 16px;
 overflow: hidden;
 white-space: nowrap;
 font-size: 13px;
}

.PostReviewCommentItem .CommentItem-content {
 font-size: 13px;
 color: #333;
}

.PostReviewCommentItem .CommentItem-foot {
 position: absolute;
 top: 23px;
 left: 0;
 font-size: 13px;
 line-height: 13px;
}

.PostReviewCommentItem .CommentItem-foot .CommentItem-action:not(.CommentItem-actionRemove) {
 display: none;
}

.PostReviewCommentItem .CommentItem-foot .CommentItem-actionRemove {
 font-size: 13px;
 height: 13px;
 line-height: 13px;
}

.PostReviewCommentItem .CommentItem-foot .CommentItem-actionRemove .icon {
 display: none;
}

.PostReviewCommentItem .CommentItem-foot .CommentItem-actionRemove:before {
 content: '\B7';
 margin-right: 6px;
}

.PostReviewCommentItem.is-published .CommentItem-actionRemove {
  display: none;
}

.PostReviewComment-close,
.PostReviewComment-toggle {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 14px;
  right: 16px;
  cursor: pointer;
  color: #808080;
}

.PostReviewComment-toggle i {
 display: inline-block;
}

.PostReviewComment-toggle--open i {
 -webkit-transform: rotate(180deg);
         transform: rotate(180deg);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostManage .Menu-dropdown {
 top: 100%;
 width: 88px;
 left: 50%;
 margin-left: -44px;
}

.PostManage .Menu-dropdown .Button {
 text-align: center;
 padding: 0;
}

.PostManage .Menu-dropdown .Menu-item + .Menu-item {
 border-top: 1px solid rgba(0,0,0,0.08);
}

.PostManage-deleteButton {
  margin-top: 6px;
}
.Bull {
  margin: 0 6px;
}
.Bull::before {
  content: '\B7';
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

/* hack: 使用 maxHeight 控制整体高度，需要使用 height 代替 margin-bottom */

.Contributes-list li::after {
 display: block;
 height: 40px;
 content: '';
}

.ContributesItem {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.ContributesItem-avatar {
  margin-right: 12px;
}

.ContributesItem-avatar img {
 width: 48px;
 height: 48px;
 vertical-align: top;
}

.ContributesItem-info {
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
              -ms-grid-row-align: stretch;
          align-self: stretch;
  font-size: 14px;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  overflow: hidden;
}

.ContributesItem-nameLine {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.4;
}

.ContributesItem-name {
  font-size: 16px;
  font-weight: 700;
}

.ContributesItem-state span {
 vertical-align: middle;
}

.ContributesItem-state ._hover {
 display: none;
}

.ContributesItem-state:hover ._default {
 display: none;
}

.ContributesItem-state:hover ._hover {
 display: inline;
 cursor: pointer;
}

.ContributesItem-intro {
  margin-top: 6px;
  color: #808080;
  line-height: 1.4;
}

.ContributesItem-entrance {
  margin-left: auto;
  font-size: 14px;
  color: #50c87e;
  min-width: 60px;
  text-align: center;
}

.ContributesItem-entrance:hover {
 color: #0ca547;
}

@media (max-width: 660px) {
  .Contributes-list {
    padding: 0 16px;
    max-width: 100vw;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TopRightPanel {
  position: fixed;
  top: 75px;
  right: 16px;
  width: 240px;
  min-height: 177px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  z-index: 101;
}

.TopRightPanel-title {
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
}

.TopRightPanel-content {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 16px;
  display: block;
  line-height: 1.6;
  font-size: 14px;
  color: #808080;
}

.TopRightPanel-content a {
 color: #808080;
}

.TopRightPanel-content a:hover {
 text-decoration: underline;
}

.TopRightPanelButtonGroup {
  padding: 16px;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.TopRightPanelButtonGroup .Button {
 height: 32px;
 width: 72px;
 line-height: 30px;
}

.TopRightPanelButtonGroup .Button--plain {
 width: auto;
}
.MaxLength {
  font-size: 14px;
  color: #8590a6;
}
.MaxLength.is-error {
  color: #f75659;
}
.BounceLoading {
  position: relative;
}

.BounceLoading .BounceLoading-child {
  position: absolute;
  background-color: #0f88eb;
  border-radius: 50%;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: Bounce;
          animation-name: Bounce;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes Bounce {
  0%, 100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  50% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

@keyframes Bounce {
  0%, 100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  50% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
.PlaceHolder-inner {
  position: relative;
  overflow: hidden;
  background: #f6f7f9;
}

.PlaceHolder-mask {
  position: relative;
  min-width: 100%;
  vertical-align: top;
  box-sizing: border-box;
}

.PlaceHolder-bg {
  position: absolute;
  width: 200%;
  height: 100%;
  background: -webkit-linear-gradient(left, #f6f7f9 0%, #e9ebee 20%, #f6f7f9 40%, #f6f7f9 100%);
  background: linear-gradient(to right, #f6f7f9 0%, #e9ebee 20%, #f6f7f9 40%, #f6f7f9 100%);
  -webkit-animation: linear-double 1s linear 1ms infinite forwards;
          animation: linear-double 1s linear 1ms infinite forwards;
}

@-webkit-keyframes linear-double {
  0% {
    -webkit-transform: translateX(-56%);
            transform: translateX(-56%);
  }

  100% {
    -webkit-transform: translateX(56%);
            transform: translateX(56%);
  }
}

@keyframes linear-double {
  0% {
    -webkit-transform: translateX(-56%);
            transform: translateX(-56%);
  }

  100% {
    -webkit-transform: translateX(56%);
            transform: translateX(56%);
  }
}
.InfiLoader--bounceShown {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100px;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.Holder {
  height: 14px;
  margin-bottom: 16px;
  background: #f7f8fa;
  border-radius: 2px;
}

.Holder:last-child {
  margin-bottom: 0;
}

.Holder--inline,
.Holder--icon,
.Holder--button,
.Holder--avatar {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: bottom;
}

.Holder--title {
  height: 18px;
}

.Holder--icon {
  width: 14px;
  margin-right: 8px;
  border-radius: 999px;
}

.Holder--button {
  width: 96px;
  height: 34px;
  border-radius: 3px;
}

.Holder--button + .Holder--button {
  margin-left: 16px;
}

.Holder--avatar {
  width: 24px;
  height: 24px;
}
.CheckItem {
  position: relative;
  display: block;
}

.CheckItem-box {
  position: relative;
  padding: 12px;
  border: 1px solid #f7f8fa;
  border-radius: 3px;
  -webkit-transition: border-color 200ms ease-out;
  transition: border-color 200ms ease-out;
}

.CheckItem-input {
  position: absolute;
  z-index: -1;
  opacity: 1;
}

.CheckItem-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  fill: #0f88eb;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.CheckItem:hover .CheckItem-box {
  border-color: #175199;
}

.CheckItem-input:checked + .CheckItem-box {
  border-color: #175199;
}

.CheckItem-input:checked + .CheckItem-box .CheckItem-inner {
  max-width: calc(100% - 28px);
}

.CheckItem-input:not(:checked) + .CheckItem-box .CheckItem-icon {
  opacity: 0;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}
.Favlists-items {
  max-height: 236px;
  min-height: 140px;
  margin-bottom: 12px;
  overflow-x: hidden;
  overflow-y: auto;
}

.Favlists-item {
  margin-bottom: 12px;
}

.Favlists-itemInner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  line-height: 1.5;
}

.Favlists-itemContent {
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}

.CheckItem-input:checked + .CheckItem-box .Favlists-itemContent {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.Favlists-add {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.Favlists-itemName {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 24px;
  overflow: hidden;
}

.Favlists-itemNameText {
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Favlists-itemIcon {
  margin-left: 6px;
}

.Favlists-itemIcon .Icon {
  vertical-align: baseline;
}

.Favlists-itemContent {
  position: relative;
  width: 72px;
  color: #8590a6;
  text-align: right;
  white-space: nowrap;
  -webkit-transition: color 200ms;
  transition: color 200ms;
}

.Favlists-actions {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.Favlists-addButton {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.Favlists-addIcon {
  padding: 6px;
  margin: 0 8px 0 4px;
  fill: #fff;
  background-color: #cfd8e6;
  border-radius: 50%;
}

.Favlists-addItems {
  margin-bottom: 12px;
}

.Favlists-addItem {
  margin-bottom: 8px;
}

.Favlists-titleInput, .Favlists-descritionInput {
  width: 100%;
  background: none;
}

.Favlists-privacyOption {
  display: block;
  margin-bottom: 6px;
  overflow: auto;
  font-size: 14px;
}

.Favlists-privacyOptionTips {
  margin-left: 4px;
  color: #8590a6;
}

.Favlists-privacyOptionRadio {
  display: inline-block;
  width: 14px;
  height: 14px;
  padding: 2px;
  margin: 0 4px 0 0;
  vertical-align: middle;
  border: 2px solid #e7eaf1;
  border-radius: 50%;
  -webkit-transition: background-color, border-color 300ms;
  transition: background-color, border-color 300ms;
  background-clip: content-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.Favlists-privacyOptionRadio:checked {
  background-color: #0f88eb;
  border-color: #0f88eb;
}

.Favlists-privacyOptionRadio:focus {
  outline: none;
}

.Favlists-inputTips {
  padding-top: 8px;
  text-align: right;
}

.Favlists-favButton {
  width: 72px;
}
.Fav {
  margin-top: 6px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TopicItem-wrapper {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.TopicItem {
  margin: 0 16px 16px 0;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  max-width: 100%;
  background: rgba(0, 0, 0, .06);
  color: #666768;
  border-radius: 15px;
  text-align: center;
  font-size: 14px;
}

.TopicItem-remove {
  width: 16px;
  height: 16px;
  line-height: 16px;
  margin-left: 7px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostListItem {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  contain: layout;
}

.PostListItem-titleImageWrapper {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  padding-right: 16px;
}

.PostListItem-titleImage {
  height: 180px;
  width: 240px;
  border-radius: 4px;
  vertical-align: top;
  -o-object-fit: cover;
     object-fit: cover;
}

.PostListItem-info {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.PostListItem-title {
  line-height: 1.5;
  font-size: 20px;
  font-weight: 700;
}

.PostListItem-summary {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.7;
  color: #666;
  word-break: break-all;
}

.PostListItem-readall {
  padding-left: 4px;
  color: #b3b3b3;
}

.PostListItem-readall .icon {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: rotate(-90deg);
         transform: rotate(-90deg);
}

.PostListItem-footer {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 14px;
  color: gray;
}

.PostListItem-footer a:hover {
 color: #333;
}

.PostListItem-date {
  display: inline;
}

/* 纵排变种，如置顶文章 */

.PostListItem--column {
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.PostListItem--column .PostListItem-titleImageWrapper {
 padding-right: 0;
 padding-bottom: 10px;
}

.PostListItem--column .PostListItem-titleImage {
 width: 100%;
 height: 220px;
}

/* 窄图变种，如推荐阅读 */

.PostListItem--narrow .PostListItem-titleImage {
 width: 156px;
 height: 143px;
}

.PostListItem--narrow .PostListItem-footer {
 -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
}

/* 卡片变种，如首页发现 */

.PostListItem--card {
  /* TODO */
}

@media (max-width: 660px) {
  .PostListItem {
    margin-left: 16px;
    margin-right: 16px;
  }

  .PostListItem--responsive {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .PostListItem--responsive .PostListItem-titleImageWrapper {
  padding-right: 0;
  padding-bottom: 10px;
 }

  .PostListItem--responsive .PostListItem-titleImage {
  width: 100%;
  height: 220px;
 }

  .PostListItem--narrow .PostListItem-summary {
  display: none;
 }

  .PostListItem--narrow .PostListItem-titleImage {
  width: 88px;
  height: 88px;
 }

  .PostListItem--narrow .PostListItem-footer {
  margin-top: auto;
 }
}

@media (max-width: 420px) {
  .PostListItem--narrow .PostListItem-title {
  font-size: 16px;
 }
}
.Badge {
  display: inline-block;
  width: 14px;
  height: 14px;
}

.Badge-wrapper {
  margin-left: 6px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Layout-titleImage--normal {
  margin-top: 22px;
}

.Layout-titleImage--full {
  margin-top: 0;
}

.Layout-titleImage--full .PostIndex-header {
 height: calc(100vh - 59px);
 text-shadow: 0 0 10px rgba(0, 0, 0, .24);
}

.PostIndex-title {
  font-size: 32px;
  line-height: 1.3;
  font-weight: 700;
}

.Layout-titleImage--full .PostIndex-title {
 color: #fff;
 position: absolute;
 bottom: 80px;
 z-index: 1;
 width: 660px;
}

.PostIndex-author {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  color: #808080;
}

.PostIndex-author .PostIndex-authorName,
  .PostIndex-author time {
 color: #808080;
}

.PostIndex-author .PostIndex-authorName:hover, .PostIndex-author time:hover {
 color: #333;
}

.PostIndex-author .Badge {
 position: relative;
 top: -1px;
}

.Layout-titleImage--full .PostIndex-author {
 color: #fff;
 position: absolute;
 bottom: 22px;
 width: 660px;
 z-index: 1;
}

.Layout-titleImage--full .PostIndex-author .PostIndex-authorName,
    .Layout-titleImage--full .PostIndex-author time {
 color: #fff;
}

.Layout-titleImage--full .PostIndex-author .PostIndex-authorName:hover, .Layout-titleImage--full .PostIndex-author time:hover {
 color: #fff;
}

.Layout-titleImage--normal .PostIndex-author {
 margin-top: 22px;
}

.PostIndex-authorAvatar {
  margin-right: 12px;
}

.PostIndex-authorFollowButton {
  position: absolute;
  right: 0;
  width: 88px;
  padding: 0;
}

.PostIndex-authorExtension {
  margin-left: auto;
}

.PostIndex-warning {
  margin: 48px 0 -20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
  border: solid 1px #ddd;
  position: relative;
  padding: 16px;
  border-radius: 4px;
}

.PostIndex-warning .Triangle {
 position: absolute;
 bottom: -14px;
}

.PostIndex-warningTitle {
  font-weight: 700;
  margin-bottom: 8px;
}

.PostIndex-warningContent {
  color: #808080;
}

.PostIndex-warningHelp {
  color: #b3b3b3;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -12px;
}

.PostIndex-footer {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.PostIndex-topics {
  -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  overflow: hidden;
}

.PostIndex-reviewers {
  -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  font-size: 15px;
  color: #808080;
}

.PostIndex-reviewerLink {
  margin-right: 3px;
}

.PostIndex-showReviewerButton {
  height: auto;
  line-height: 1;
  color: #808080;
  font-size: 15px;
  padding: 0;
  cursor: default;
}

.PostIndex-showReviewerButton.is-clickable {
 cursor: pointer;
}

.PostIndex-vote {
  margin: 40px 0;
  -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;

}

.PostIndex-voteButton {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 36px;
}

.PostIndex-voteButton .icon {
 margin-right: 4px;
}

.PostIndex-voteButton[disabled] {
 border-color: transparent;
 opacity: 1;
 padding: 0;
 color: #50c87e;
}

.PostIndex-voteButton[disabled]:hover {
 background: transparent;
}

.PostIndex-voteButton[disabled]:active {
 background: transparent;
 color: #50c87e;
}

.PostIndex-voters {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 16px;
}

.PostIndex-voter {
  margin: 0 8px 8px 0;
}

.PostIndex-voter img {
 width: 26px;
 height: 26px;
}

.PostIndex-control {
  margin: 40px 0;
  -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.PostIndex-control > * + * {
 margin-left: 15px;
}

.PostIndex-editPost {
  font-size: 15px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 36px;
}

.PostIndex-editPost span {
 position: relative;
 top: 1px;
}

@media (max-width: 660px) {
  .PostIndex-control .PostShare .Menu-dropdown {
  margin-left: 0;
  left: 0;
 }
}

/* Post typo */

.PostIndex-content {
  margin: 30px 0;
  line-height: 1.7;
}

.PostIndex-recommendZone {
  position: relative;
  padding-top: 32px;
  padding-bottom: 55px;
}

/* for recommendPost date hover-title */

.PostIndex-recommendZone::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 100vw;
 margin-left: calc(660px / 2 - 50vw);
 background: #fbfbfb;
 z-index: -1;
}

.PostIndex-recommendZone .BlockTitle-title {
 background: #fbfbfb;
}

.PostIndex-recommends li + li {
 margin-top: 56px;
}

.PostIndex-allVoters {
  position: relative;
  width: 26px;
  height: 26px;
  color: #b3b3b3;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
}

.PostIndex-allVoters .icon-ic_like_more {
 position: relative;
 top: 1px;
 vertical-align: middle;
}

@media (max-width: 420px) {
  /* 是编辑推荐时显示推荐，否则显示专栏名 */
  .PostIndex-recommends .PostListItem-footer {
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
 }
  .PostIndex-recommends .PostListItem-footer .Bull,
      .PostIndex-recommends .PostListItem-footer .PostListItem-name,
      .PostIndex-recommends .PostListItem-footer .PostListItem-date,
      .PostIndex-recommends .PostListItem-footer .PostListItem-sourcePrefix {
  display: none;
 }
  .PostIndex-recommends .PostListItem--recommended .PostListItem-source {
  display: none;
 }
}

/*
 * 顺序控制：
 * 窄屏时让收录信息在评论区下
 */

@media (max-width: 660px) {
  .Layout-titleImage--normal {
    margin-top: 0;
  }

  .Contributes {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .PostIndex-recommendZone {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }

  .PostIndex-header {
    margin: 0 16px 0 16px;
  }

  .PostIndex-header .TitleImage {
  margin-left: -16px;
  margin-right: -16px;
 }

  .PostIndex-content,
  .PostIndex-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .PostIndex-reviewers {
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-bottom: 20px;
    -webkit-order: -1;
        -ms-flex-order: -1;
            order: -1;
  }

  .PostIndex-reviewers {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .PostIndex-topics {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }

  .PostIndex-control {
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-bottom: 20px;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }

  .PostIndex-vote {
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4;
    margin-top: 0;
  }

  .PostIndex-recommendZone::before {
    margin-left: 0;
  }
}
/* 取自旧专栏 styles/ui/_videobox.scss */
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.RichText {
  display: block;
}
.RichText div {
 display: block;
}
.RichText .video-box,
  .RichText .link-box {
 position: relative;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 margin: 12px 0;
 padding: 0;
 width: 100%;
 border: solid 1px #e7eaf2;
 border-radius: 4px;
 overflow: hidden;
 cursor: pointer;
 box-sizing: border-box;
 box-shadow: 0 2px 4px rgba(0, 34, 77, 0.05);
}
html.no-touch .RichText .video-box:hover, html.no-touch .RichText .link-box:hover {
 text-decoration: none;
}
.RichText .video-box .thumbnail, .RichText .link-box .thumbnail {
 height: 110px;
 width: 110px;
 margin: 0;
 -o-object-fit: cover;
    object-fit: cover;
 border-radius: 4px 0 0 4px;
}
.RichText .video-box .content, .RichText .link-box .content {
 padding: 10px 16px;
 overflow: hidden;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex: 1;
     -ms-flex: 1;
         flex: 1;
 -webkit-flex-direction: column;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-justify-content: center;
     -ms-flex-pack: center;
         justify-content: center;
 height: auto;
}
.RichText .video-box .title, .RichText .link-box .title {
 position: relative;
 display: block;
 max-width: 100%;
 max-height: 56px;
 box-sizing: border-box;
 font-size: 18px;
 line-height: 28px;
 font-weight: 700;
 color: #333;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
}
.RichText .video-box .title .z-ico-extern-blue,
      .RichText .video-box .title .z-ico-extern-gray,
      .RichText .link-box .title .z-ico-extern-blue,
      .RichText .link-box .title .z-ico-extern-gray {
 display: none;
}
.RichText .video-box .url, .RichText .link-box .url {
 margin-top: 8px;
 color: #a5a5a5;
 font-size: 13px;
 display: inline-block!important;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.RichText .video-box .url .z-ico-video, .RichText .link-box .url .z-ico-video {
 display: none;
}
html.no-touch .RichText .video-box:hover:after {
 content: '\E922';
 font-family: 'icomoon' !important;
 font-size: 24px;
 line-height: 24px;
 color: #fff;
 position: absolute;
 right: 41px;
 top: 41px;
 text-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.RichText .video-link {
 padding-left: 28px;
 background-image: url(/images/video/video.png);
 background-repeat: no-repeat;
 background-position: 0 center;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .RichText .video-link {
  background-image: url(/images/video/video@2x.png);
 }
}
.RichText .link-box .label {/* T63872 web 端还没有需求 */
 display: none;
}
.RichText .share-link {
 padding-left: 28px;
 background: url(/static/images/link.svg) no-repeat 6px center;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnSubmissionDialog {
  height: 160px;
}

.ColumnSubmissionDialog .Spinner {
 margin-top: 50px;
}

.ColumnSubmissionDialog .SimpleInput-wrapper {
 margin: 5px 0;
}

.ColumnSubmissionDialog-empty {
  margin-top: 50px;
  text-align: center;
}

.ColumnSubmissionPopover {
  z-index: 206;
}

.ColumnSubmissionPopover .Menu {
 width: 306px;
 -webkit-transform: translateY(-6px);
         transform: translateY(-6px);
}

.ColumnSubmissionPopover .AutoComplete-group span {
 height: 40px;
 line-height: 40px;
 padding-left: 16px;
 color: #b3b3b3;
}

.ColumnSubmissionPopover .AutoComplete-group .Menu-item {
 padding: 0 16px;
}

.ColumnSubmissionDialog-selectedWrapper {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, .16);
  position: relative;
  margin: 6px 0;
}

.ColumnSubmissionDialog-selected {
  line-height: 36px;
  background: rgba(0, 0, 0, .06);
  padding: 0 42px 0 8px;
  border-radius: 4px;
}

.ColumnSubmissionDialog-removeSelected {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 20px;
  padding: 0 4px;
}

.ColumnSubmissionDialog-removeSelected .Icon {
 max-width: 12px;
 fill: #808080;
}

.ColumnSubmissionDialog-success {
  text-align: center;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TopicTag {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding: 0 15px;
  border-radius: 15px;
  border: 1px solid rgba(0,0,0,.1);
  color: gray;
}

.TopicTag:active {
  background: rgba(0,0,0,.1);
}

.TopicTag.is-active {
  border-color: transparent;
  background: rgba(0,0,0,.06);
  cursor: default;
}

.TopicTag-count {
  margin-left: 3px;
  color: #b3b3b3;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnTopicList {
  margin-bottom: 48px;
  text-align: center;
}

.ColumnTopicList li {
 display: inline-block;
 margin: 8px;
}

.ColumnTopicList-showall {
  padding: 4px 10px;
  font-size: 14px;
  color: #808080;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnBanNotice {
  width: 100%;
  margin-bottom: 18px;
  padding: 16px;
  line-height: 1.5;
  border: 1px solid #d2d3d4;
  border-radius: 4px;
  font-size: 14px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.ColumnBanNotice a {
 color: #259;
 text-decoration: none;
}

.ColumnBanNotice a:hover {
 text-decoration: underline;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnTransferModal {
  width: 816px;
  height: 488px;
  padding: 0;
}

.ColumnTransferModal .Modal-inner {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-direction: row;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-align-items: stretch;
     -ms-flex-align: stretch;
         align-items: stretch;
 height: 100%;
}

.ColumnTransferModal .Modal-title {
 -webkit-flex: 0 0 50%;
     -ms-flex: 0 0 50%;
         flex: 0 0 50%;
 height: auto;
 padding-top: 300px;
 text-align: center;
 background-image: url(/static/images/migration_left_img.png);
 background-repeat: no-repeat;
 background-size: cover;
}

@media (-webkit-min-device-pixel-ratio: 2) {

 .ColumnTransferModal .Modal-title {
  background-image: url(/static/images/migration_left_img@2x.png);
 }
}

.ColumnTransferModal .Modal-content {
 -webkit-flex: 0 0 50%;
     -ms-flex: 0 0 50%;
         flex: 0 0 50%;
 padding: 32px;
}

.ColumnTransfer {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.ColumnTransfer-editor {
  margin-top: 36px;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.ColumnTransfer-help {
  margin-left: .5em;
}

.ColumnTransfer-help .Menu-dropdown {
 width: 370px;
 max-width: 100vw;
 left: -175px;
 top: 100%;
}

.ColumnTransfer-help .Menu-item {
 padding: 16px;
 line-height: 18px;
 text-indent: 0;
 color: #808080;
}

.ColumnTransfer-help .Menu-item:hover {
 background: white;
}

.ColumnTransfer-selected {
  margin-top: 16px;
  display: block;
}

.ColumnTransfer-selectedItem {
  display: inline-block;
  margin-bottom: 4px;
}

.ColumnTransfer-footer {
  margin-top: auto;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.FirstTimeModal {
  width: 408px;
  height: 488px;
  background-image: url(/static/images/welcome_bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (-webkit-min-device-pixel-ratio: 2) {

 .FirstTimeModal {
  background-image: url(/static/images/welcome_bg@2x.png);
 }
}

.FirstTimeModal .Modal-title {
 margin: 221px 0 8px;
 font-size: 18px;
 text-align: center;
 font-weight: 700;
}

.FirstTimeModal .Modal-content {
 padding: 0;
}

.FirstTimeModal-content {
  padding: 0 32px;
  margin-bottom: 32px;
  line-height: 1.7;
  text-align: left;
  color: #333;
}

.FirstTimeModal-buttonGroup {
  margin-top: 32px;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
}

.FirstTimeModal-buttonGroup .Button + .Button {
 margin: 8px 0 0;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.InvitePanel-success {
  padding: 0 16px;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.InvitePanel-successIcon {
  display: block;
  margin-top: 8px;
  margin-bottom: 12px;
  font-size: 36px;
  color: #50c87e;
}
.ColumnEnd {
  position: relative;
  display: block;
  margin: 30px auto 80px;
  text-align: center;
  color: rgba(0, 0, 0, .1);
}

.ColumnEnd::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 340px;
  height: 1px;
  left: 50%;
  margin-left: -170px;
  background: currentColor;
}

.ColumnEnd-icon {
  position: relative;
  padding: 0 12px;
  background: white;
  z-index: 1;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnAbout {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

@media (max-width: 660px) {

 .ColumnAbout {
  padding-left: 16px;
  padding-right: 16px;
 }
}

.ColumnAbout-avatar {
  width: 100px;
  height: 100px;
  margin-bottom: 22px;
  border-radius: 50%;
}

.ColumnAbout-name {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 12px;
}

.ColumnAbout-intro {
  margin-bottom: 18px;
}

.ColumnAbout-actions {
  position: relative;
  margin-bottom: 18px;
}

.ColumnAbout-menu {
  position: absolute;
  right: -56px;
  top: 2px;
  padding: 0;
}

.ColumnAbout-menu .Menu-dropdown {
 top: 100%;
 left: -48px;
 margin-top: 8px;
 width: 128px;
}

.ColumnAbout-menuButton {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #b3b3b3;
  -webkit-transition: -webkit-transform .2s ease-out .2s;
  transition: -webkit-transform .2s ease-out .2s;
  transition: transform .2s ease-out .2s;
  transition: transform .2s ease-out .2s, -webkit-transform .2s ease-out .2s;
}

.Menu--open .ColumnAbout-menuButton {
 -webkit-transform: rotate(180deg);
         transform: rotate(180deg);
}

/* hack for safari */

.ColumnAbout-menuButton:before {
 display: block;
 margin: 0 auto;
}

.ColumnAbout-followers {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  color: gray;
}

.ColumnAbout-followers:hover {
  color: #333;
}

.ColumnBreadcrumb {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin-bottom: 48px;
  font-size: 14px;
}

.ColumnBreadcrumb .arrow {
 margin: 0 12px;
 width: 24px; /* 避免字体加载完时的抖动 */
 color: #808080;
 -webkit-transform: rotate(-90deg);
         transform: rotate(-90deg);
}

.ColumnBreadcrumb .Avatar {
 margin-right: 12px;
}

.ColumnPins {
  margin-bottom: 42px;
}

.ColumnPostList li,
  .ColumnPostList .Spinner {
 margin-bottom: 56px;
}

.ColumnPostList--empty {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #808080;
  margin-bottom: 40px;
}

.ColumnPostList--empty p {
 margin-top: 29px;
 margin-bottom: 16px;
}

.ColumnPostList-emptyHolderIcon {
  font-size: 106px;
  color: #e5e5e5;
}

.ColumnPostList-emptyWrite {
  margin-top: 24px;
}

@media (max-width: 660px) {
  .ColumnBreadcrumb {
    padding-left: 16px;
  }
}
